<template>
  <div class="home">
    <div class="home-head">
      <el-menu mode="horizontal"  @select="handleSelect">
        <el-menu-item index="/">首页</el-menu-item>
        <el-sub-menu index="2">
          <template #title>功能菜单</template>
          <el-menu-item index="oneView">功能 one</el-menu-item>
          <el-menu-item index="twoView">功能 two</el-menu-item>
          <el-menu-item index="threeView">功能 three</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="fourView">其它</el-menu-item>
      </el-menu>
    </div>
    <div class="home-body">
      <router-view/>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component'

export default class Home extends Vue {
  handleSelect (e:string):void{
    this.$router.push(e)
  }
}
</script>
<style lang="scss" scoped>
.home{
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin:0;
  box-sizing: border-box;
  background-color: #eeeeff;
  .home-head{
    height: 60px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #ffffff;
  }
  .home-body{
    height: calc(100% - 60px);
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 10px 5px;
  }
}
</style>
